<template>
  <view>

    <van-notify id="van-notify" style="z-index: 2001 !important;" />
    <view v-for="(item,index) in data" :key="index">
      <WordBook :data="item" v-on:ToChange="goWordList(item)" />
    </view>

    <van-button size="normal" round type="info" class='but' @click="addBook">添加单词本</van-button>
    <van-dialog use-slot title="添加单词本" :show="show" show-cancel-button :before-close="onBeforeClose" zIndex="109"
      @close="close">
      <van-field @change="bookName" :value="formData.wordBookName" :border="false" label="单词本名字"
        placeholder="请输入单词本名字" />
      <van-radio-group :value="formData.collection" @change="onChange" direction="horizontal">
        <span class="starBooksText" style="margin-right: 1.5rem;">收藏单词本</span>
        <van-radio name="0" class="starText">不收藏</van-radio>
        <van-radio name="1" class="starText">收藏</van-radio>
      </van-radio-group>
      <span class="starBooksText cover ">单词本封面</span>
      <van-tabs color="#39a9ed" :active="active">
        <view v-for="item in img" :key="item.name">
          <van-tab :title="item.name">
            <scroll-view scroll-y="true" class="scroll" style="margin: auto;">
              <view class="flex">
                <view class="le-img" v-for="(item2,index2) in item.foods" :key="item2.key"
                  @click="selectedImg(item2.icon)">
                  <!-- box-shadow:0px 0px 7px 2px #39a9ed -->
                  <image class="image"
                    :style="item2.icon==formData.wordBookCover?'box-shadow:0px 0px 7px 2px #39a9ed':''"
                    :src="item2.icon"></image>
                  <text>{{item2.name}}</text>
                </view>
              </view>
            </scroll-view>
          </van-tab>
        </view>
      </van-tabs>
    </van-dialog>

  </view>
</template>

<script>
  import Notify from '@/wxcomponents/vant/notify/notify';
  import classifyData from "@/common/classify.data.js";
  export default {
    data() {
      return {
        img: classifyData, // 单词本图片
        data: null, // 单词本数据
        show: false, // 控制新增单词本弹窗
        form: {
          wordBookName: "", //单词本名字
          wordBookCover: "", //单词本封面
          learnedWords: 0, //已学单词
          totalWords: 0, //总共单词
          collection: '0' //是否被收藏  1:收藏  0:未收藏  默认为0
        },
        formData: {
          wordBookName: "",
          collection: '0',
          wordBookCover: "",
        },
        // 分类标签页
        active: 0,

      };
    },
    methods: {
      // 获取单词本
      async getwordBook() {
        const res = await uni.$myRequest('/home/wordBook/wordBook', 'GET')
        // 赋值当前单词本数据
        this.data = res.data.data
      },
      // 添加单词本
      addBook() {
        this.show = true
      },
      // 添加单词本弹窗的点击取消和确认的事件(vant真他妈难用)
      onBeforeClose(action) {
        //因为onBeforeClose无法获取this,所以使用getCurrentPages（获取当前页面栈）来获取data
        const pages = getCurrentPages()
        // page就是当前页面
        let page = pages[pages.length - 1]
        return new Promise((resolve) => {
          if (action === 'confirm') {
            // page.formData
            let boolean = false


            if (!page.data.formData.wordBookName) {
              Notify({
                type: 'danger',
                message: '请输入单词本名字',
                duration: 1500,
              });
              return resolve(false);
            }



            if (!page.data.formData.wordBookCover) {
              Notify({
                type: 'danger',
                message: '请选择单词本封面',
                duration: 1500,
              });
              return resolve(false);
            }
            uni.$myRequest('/home/wordBook/wordBookAdd', 'POST', page.data.formData).then((res) => {

              page.$vm.getwordBook()
            })
          }
          resolve(true);
        })

      },
      // 新增单词本弹框的关闭事件
      close() {
        this.show = false
        this.formData.wordBookName=''
      },
      bookName(event) {
        this.formData.wordBookName = event.detail
      },
      // 收藏单选框赋值
      onChange(event) {
        this.formData.collection = event.detail
      },
      // 点击选中图片
      selectedImg(wordBookCover) {
        this.formData.wordBookCover = wordBookCover
      },
      // 跳转至单词列表页面
      goWordList(item) {

        let data = {
          id: item.id,
          wordBookCover: item.wordBookCover,
          wordBookName: item.wordBookName
        }

        uni.navigateTo({
          url: "/subpkg/word/word?data=" + JSON.stringify(data)
        });
      }
    },
    created() {
      // 获取单词本数据
      this.getwordBook()

    },

  }
</script>

<style lang="scss">
  //修改左侧宽度
  .van-tree-select__content {}

  .van-sidebar-item {
    border-left: none !important;
  }

  .yanse {
    .van-sidebar-item--selected {
      border: none;
    }

    .van-sidebar-item--selected:after {
      content: '';
      width: 9rpx;
      height: 40rpx;
      left: 0;
      position: absolute;
      background-color: #39a9ed;
    }
  }

  .but {
    display: flex;
    justify-content: center;
    margin-top: 20rem;
  }

  .starBooksText {
    color: #646566;
    font-size: 0.9rem;
    margin: 0% 5% 0% 5%;
  }

  van-radio {
    z-index: 999;
  }

  .starText {
    color: #646566;
    font-size: 0.9rem;
  }

  .cover {
    position: absolute;
    left: 0rem;
    width: 5rem;
    margin-top: 0.7rem;
    z-index: 999;
  }


  .van-tabs__nav {
    position: absolute !important;
    width: 10rem;
    left: 6rem;
  }


  .scroll {
    height: 13rem;


  }

  .flex {
    display: flex;
    flex-wrap: wrap;

  }

  .le-img {
    width: 4rem;
    padding: 0.5rem;
    text-align: center;

    .image {
      width: 115rpx;
      height: 115rpx;

    }

    text {
      font-size: 0.7rem;
    }


  }
</style>
